<template>
	<view :data-theme="theme()" :class="theme() || ''">
		<view class="topBox">
			<!-- tabs -->
			<view class="top-tabbar">
				<view v-for="(item,index) in tabsList" :key="index"
					:class="state_active == index ? 'tab-item active' : 'tab-item'" @click="stateFunc(index)">
					{{item.name}}
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'">
			<view v-for="(item,index) in arLeList" :key="index" class="bg-white mb20 mt20">
				<view class="d-a-c f30 p20 m-0-20">
					<image class="largeAvatar mr20" :src="item.img" mode="aspectFit"></image>
					<view class="flex-1">
						<view class="mb10 fb">{{item.name}}</view>
						<view class="mt60">预览次数：{{item.mun}}</view>
					</view>
					<button class="theme-bg white" open-type="share" v-if="!state_active">分享</button>
					<button class="theme-bg white" v-else>{{state_active==1?'待审核':'发布'}}</button>
				</view>
			</view>
		</scroll-view>

		<view class="publish">
			<button class="theme-bg white  f30" @click="onWayAdd">发布文章</button>
		</view>
	</view>

</template>

<script>
	export default {

		data() {
			return {
				tabsList: [{
					name: '分享列表',
				}, {
					name: '审核列表',
				}, {
					name: '草稿列表',
				}],
				state_active: 0, //选择index
				scrollviewHigh: 0, //scroll-view高
				arLeList: [
				// 	{
				// 	img: 'http://ruiyu.oss-cn-hangzhou.aliyuncs.com/image/newSaas/wx.png',
				// 	name: '标题名称',
				// 	mun: '102'
				// }, {
				// 	img: 'http://ruiyu.oss-cn-hangzhou.aliyuncs.com/image/newSaas/wx.png',
				// 	name: '标题名称',
				// 	mun: '102'
				// },
				]
			}
		},
		onLoad(option) {

		},
		onShow() {

		},
		mounted() {
			this.init();
		},
		methods: {
			/*初始化*/
			init() {
				let self = this;
				uni.getSystemInfo({
					success(res) {
						self.phoneHeight = res.windowHeight;
						// 计算组件的高度
						let view = uni.createSelectorQuery().select('.topBox');
						view.boundingClientRect(data => {
							let h = self.phoneHeight - data.height - 20;
							self.scrollviewHigh = h;
						}).exec();
					}
				});
			},
			// tabs切换
			stateFunc(index) {
				this.state_active = index
			},
			onWayAdd() {
				uni.showToast({
					title:'暂未开放',
					icon:'none'
				})
				return
				let url = '/pagesLive/menu/article/details/publish';
				this.gotoPage(url);
			},


		}

	}
</script>

<style lang="scss" scoped>
	.top-tabbar {
		height: 96rpx;
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		overflow-x: auto;

		.tab-item {
			flex-shrink: 0;
			white-space: nowrap;
			flex: auto;
		}
	}

	.publish.theme-bg {
		padding: 5rpx 0;
		margin: 10rpx 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
	}
</style>